﻿@using CuongHanh
@using CuongHanh.Context
@using CuongHanh.Models
@model CuongHanh.Models.View.ProductView
@{
    Layout = "~/Views/Shared/_WoodLayoutNonSlider.cshtml";
}


<link href="@Url.Content("~/Content/css/js/img_jcarousel_skin.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.Content("~/Content/css/js/catalogue_detail.css")" rel="stylesheet" type="text/css"/> 
<script src="@Url.Content("~/Scripts/zoomimage/jquery.fancybox.pack.js")" type="text/javascript"> </script>


<link href="@Url.Content("~/Scripts/zoomimage/jquery.fancybox.css")" rel="stylesheet" type="text/css"/> 
<script src="@Url.Content("~/Scripts/zoomimage/jquery.elevatezoom.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/zoomimage/jquery.fancybox.pack.js")" type="text/javascript"> </script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#zoom_03").elevateZoom({ gallery: 'gal1', cursor: 'pointer', galleryActiveClass: "active", imageCrossfade: true, loadingIcon: '@Url.Content("~/Scripts/zoomimage/spinner.gif")' });

        $("#zoom_03").bind("click", function(e) {
            var ez = $('#zoom_03').data('elevateZoom');
            ez.closeAll(); //NEW: This function force hides the lens, tint and window	
            $.fancybox(ez.getGalleryList());
            return false;
        });

        var path1 = '@Url.Content("~/Content/Images/Article/")';
        var id = '@Model.Id';
        var temp = unescape('@Model.Article');
        for (var i = 0; i < 10; i++) {
            var name = "I_ARTICLE_" + id + '_' + i;
            if (temp.indexOf(name) == -1)
                break;
            else
                temp = temp.replace(name, path1 + name + '.jpg');
        }
        $('#tab1').html(temp);

    });
</script>


<div class="d-main-right">
    @*<div class="d-link">
        <span style="color: #000; font-weight: bold;">Trang Chủ &gt;&gt;</span> <span>Trang Sức &gt;&gt;
                                                                                </span><span>Nhẫn &gt;&gt;</span> <span>Nhẫn cặp</span>
    </div>*@
    <div class="clear">
    </div>
    <div class="product-detail">
        <h2 style="background: #741600;">
            @Html.GetResource("thongtinsanpham")
        </h2>
        <div class="detail_left">
            
            <div class="main_img">
                <div style="position: relative; top: 0px;" id="wrap">
                    <div class="zoomWrapper" style="height: 290px; width: 290px;">
                        <img data-zoom-image="@Url.GetImage(Model.Image,ImageType.Large)" src="@Url.GetImage(Model.Image,ImageType.Small)" id="zoom_03" style="position: absolute;" alt="no image"/>
                    </div>
                </div>
                <div style="display: block;" class="zoomwrap">
                    <span class="iconzoom"></span>
                    <span class="zoom">@Html.GetResource("rechuotlenhinhdephongto")</span></div>
            </div>
            <div style="display: block;" class="images">
                <div class="img-jcarousel-skin-1">
                    <div style="display: block; position: relative;">
                        <div >
                            <div style="position: relative;" class="jcarousel-clip jcarousel-clip-horizontal">
                                <ul style="left: 0px; margin: 0px; overflow: hidden; padding: 0px; position: relative; top: 0px; width: 292px;" class="jcarousel-list jcarousel-list-horizontal" id="gal1">
                                    <li><a data-zoom-image="@Url.GetImage(Model.Image,ImageType.Large)" data-image="@Url.GetImage(Model.Image,ImageType.Small)" style="float: left; list-style: none;" class="jcarousel-item jcarousel-item-horizontal">
                                            <img src="@Url.GetImage(Model.Image,ImageType.Thumnail)" class="imggalery" alt="">
                                        </a></li>
                                    @foreach (string image in Model.Images)
                                    {
                                        <li >
                                            <a data-zoom-image="@Url.GetImage(image,ImageType.Large)" data-image="@Url.GetImage(image,ImageType.Small)" style="float: left; list-style: none;" class="jcarousel-item jcarousel-item-horizontal">
                                                <img src="@Url.GetImage(image,ImageType.Thumnail)" alt="">
                                            </a>
                                        </li>
                                    }

                                   
                                </ul>
                            </div>
                        </div>
                        <div style="display: block;"  class=" jcarousel-prev-horizontal ">
                        </div>
                        <div style="display: block;"  class=" jcarousel-next-horizontal jcarousel-next-disabled-horizontal">
                        </div>
                    </div>
                </div>

            </div>

        </div>
        @* <script type="text/javascript">
            $(function () {
                $('#carousel_0').infiniteCarousel({
                    displayTime: 2000,
                    transitionSpeed: 0,
                    autoPilot: true,
                    showControls: false,
                    enableKeyboardNav: false,
                    easeLeft: 'easeOutQuint',
                    displayProgressRing: false
                });
            });</script>*@
        <!--------------detail-left------------>
        <div class="detail-right">
            <h3 class="name-popup">
                @Model.Name</h3>
            <div class="medium">
                <h3 class="negociate">
                    @AppUtil.FormatNumber(Model.Price) vnd</h3>
                <h3 class="number">
                    Mã sản phẩm : @Model.Code</h3>
                <h3 class="status">
                    Sẳn có</h3>
                <div class="total" style="height: 30px;">
                    <div style="float: left; margin-top: 5px;">Số lượng:</div>
                    <div>
                        <input type="text" class="txtnumber" id="Text3" style="float: left;" value="0">
                        <div style="float: left; height: 40px; margin-left: 3px; width: 14px;">
                            <input type="button" class="btn-up" value="" id="Button3">
                            <input type="button" class="btn-down" value="" id="Button4">
                        </div>
                    </div>
                </div>
                <div style="clear: left; height: 1px; width: 100%;"></div>
                <p>
                    Tư vấn mua hàng Online: 093 8738 988 (Anh Hạnh)<br/> Hỗ trợ kỹ thuật: 093 8886 815 (Anh Ngọc)
                </p>
            </div>
            <a class="buy-popup" href="#">Thêm vào giỏ hàng</a>
        </div>
        <!--------------detail-right------------>
        <div class="clear">
        </div>
    </div>
    <!------end product-detail------>
    <div class="box-tab">
        <ul class="tabinfo">
            <li><a href="#tab1">@Html.GetResource("thongtinchitiet")</a></li>
            @*<li><a href="#tab2">hình ảnh</a></li>
            <li><a href="#tab3">khuyến mãi</a></li>*@
        </ul>
        <div class="clear">
        </div>
        <div id="tab1">
        </div>
        <div id="tab2">
        </div>
        <div id="tab3">
        </div>
    </div>
</div>